<template>
    <el-container>
      <el-header>首页</el-header>
      <el-main>
        <h2>最高评分的三本书</h2>
        <el-row :gutter="20">
          <el-col :span="8" v-for="book in topBooks" :key="book.idbook">
            <el-card>
              <h3 @click="viewBook(book.idbook)">{{ book.bookName }}</h3>
              <p>作者: {{ book.author }}</p>
              <p>点击次数: {{ book.clicks }}</p>
            </el-card>
          </el-col>
        </el-row>
  
        <h2>其他书籍</h2>
        <el-row :gutter="20">
          <el-col :span="8" v-for="book in otherBooks" :key="book.idbook">
            <el-card>
              <h3 @click="viewBook(book.idbook)">{{ book.bookName }}</h3>
              <p>作者: {{ book.author }}</p>
              <p>点击次数: {{ book.clicks }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        topBooks: [],
        otherBooks: []
      };
    },
    created() {
      this.fetchBooks();
    },
    methods: {
      fetchBooks() {
        axios.get('/api/books')
          .then(response => {
            const books = response.data;
            this.topBooks = books.slice(0, 3);
            this.otherBooks = books.slice(3);
          })
          .catch(error => {
            console.error('获取书籍失败:', error);
          });
      },
      viewBook(idbook) {
        this.$router.push({ path: `/read/${idbook}` });
      }
    }
  };
  </script>
  
  <style scoped>
  h3 {
    cursor: pointer;
    color: #409EFF;
  }
  h3:hover {
    text-decoration: underline;
  }
  </style>
  